<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>坤狼</title>
<link rel="stylesheet" href="resources\we-vue\style.css">
<link rel="stylesheet" href="resources\css\font-awesome.min.css">



<style type="text/css">
	
	html{
		height:100%; /* 高度填充整个窗口 */
		font-size:100px;
	}
	body{
		height:100%; /* 高度填充整个html */
		padding:0; /* 内边距为0 */
		margin:0; /* 外边距为0 */
		background-color: #EEEEEE;/*背景为淡灰色 */		
	}
	
	#app{
		position: relative;	
		height:100%;
		width:100%;	
	}
	
	
	#type-list{

		display:flex;
		flex-direction: row;

		overflow: hidden;
		font-size:0.15rem;
		color:#FFDDBB;
		background-color: #AA3322;
		
		height:0.35rem;
		line-height:0.35rem;
		
		position: absolute;
		top:0;
		left:0;
		width:100%;


	}

	.gtype{
		padding:0 0.1rem;
		flex:none;

	}

	#goods-list{
		display:flex;
		flex-direction:row;
		flex-wrap: wrap;
		justify-content:space-between;
		align-items: flex-start;
		
		box-sizing:border-box;
		
		padding:0.1rem;
		overflow:auto;
		
		position: absolute;
		top:0.35rem;
		left:0;
		bottom:0.35rem;
		width:100%;
		
		
	}
	.goods{

		box-sizing:border-box;
		padding:0.05rem;

		background-color:white;
		color:#888888;
		width:40%;
		border-radius:0.06rem;
		margin-bottom:0.15rem;
		flex: 1 1 auto;

		display:flex;
		flex-direction: column;
		align-items: center;
	}
	
	.goods:nth-child(odd){
		margin-right:0.05rem;
		
	}

	.goods:nth-child(even){
		margin-left:0.05rem;		
	}

	.goods img{
		width:100%;
	}
	.goods>div{		
		width:100%;
	}
	
	#nav-list{
		position: absolute;		
		left:0;
		bottom:0;
		width:100%;
		height:0.35rem;
		
		background-color:#FFDDAA;
		
		display:flex;
		flex-direction: row;
		
	}
	
	#nav-list>*{
		
		width:33%;
		
		box-sizing:border-box;
		color:#AA3322;
		
		font-size:0.3rem;
		
		
		
		display:flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		
	}

	
	
</style>

</head>
<body>
	<div id="app"> 
		
		<div id="type-list" ref="typelistDom"  @touchstart="ontouchstart($event)" @touchmove="ontouchmove($event)" @touchend="ontouchend($event)" >
			
			<div class="gtype" @click="onClickType({t_id:-1,t_name:'全部'})" :style="{color:(-1==currType.t_id?'white':'#FFAA99')}" >全部</div>
			<div class="gtype" v-for="type in typeList" @click="onClickType(type)" :style="{color:(type.t_id==currType.t_id?'white':'#FFAA99')}" >{{type.t_name}}</div>
			
		</div>

		<div id="goods-list"  >

			<div class="goods" v-for="goods in goodsList">				
				<img :src="goods.g_img" />
				<div style="font-size:0.15rem;">
					<span style="color:#dd0000;font-size:0.18rem;">￥{{goods.g_price}}</span>
					&nbsp;
					{{goods.g_num}}件
					&nbsp;
					<i class="fa fa-cart-arrow-down fa-lg" style="color:#DD0000;"></i>
					
				</div>
				<div style="font-size:0.15rem;line-height:0.18rem;height:0.36rem;overflow: hidden;">{{goods.g_desc}}</div>				
			</div>

		</div>
		
		<div id="nav-list">
			<div><i class="fa fa-home"></i></div>
			<div><i class="fa fa-shopping-cart"></i></div>
			<div><i class="fa fa-user"></i></div>
		</div>
		
		
	</div>
	
<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my-mobile.js"></script>

<script type="text/javascript">
	
	let vm = new Vue({
		
		el:'#app',
		
		data:{
			
			goodsList:[],
			typeList:[],

			currType:{
				t_id:'-1',
				t_name:'全部'
			},

			pos:{}
			
		},
		
		methods:{
			
			
			getGoodsList(){
				my.loadData(
					{url:'/all-goods',data:{g_type:this.currType.t_id}},
					function(goodslist){
						vm.goodsList=goodslist;
					}
				);
			},
			getTypeList(){
				my.loadData(
					{url:'/all-types'},
					function(typelist){
						vm.typeList=typelist;
					}
				);
			},

			//点击类型
			onClickType(type){
				this.currType=type;
				this.getGoodsList();
			},
			
			//手指开始触摸屏幕
			ontouchstart(event){
				//event.currentTarget 即 #goods-list对象
				
				let width=0;
				let arr = document.querySelectorAll('#type-list>div');
				for(let dom of arr){
					width+=dom.offsetWidth;
				}
				
				this.pos={
						width:width-event.currentTarget.offsetWidth,
						x:event.targetTouches[0].clientX,
						y:event.targetTouches[0].clientY,
						scrollLeft:event.currentTarget.scrollLeft,
						touching:true
				};
				
				//console.log(this.pos);
			},

			//触摸屏幕的手指移动
			ontouchmove(event){
				
				
				
				if(!this.pos.touching) return;	
				
				if(this.pos.scrollLeft+this.pos.x-event.targetTouches[0].clientX<0){
					
					event.currentTarget.scrollLeft=0;
				
				}else if(this.pos.scrollLeft+this.pos.x-event.targetTouches[0].clientX>this.pos.width){
					
					event.currentTarget.scrollLeft=this.pos.width;
					
				}else{
					
					event.currentTarget.scrollLeft=this.pos.scrollLeft+this.pos.x-event.targetTouches[0].clientX;
				}
				
				
			},

			//触摸屏幕的手指触摸结束
			ontouchend(event){
				this.pos.touching=false;
			},

			
		},
		
		mounted(){
			//设置服务器路径
			my.setServerConfig({
				ip:'192.168.43.152',
				port:8080,
				app:'shopping'
			});

			this.getGoodsList();
			this.getTypeList();
		}
		
		
		
			
			
	});
</script>
</body>

</html>